<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />

    <!-- 点击Edit按钮打开的Template  formRules2提示框  formHandle2Edit页面的Template菜单   formHandle2取消与确认按钮 formData2Edit页面菜单的Data源-->
    <r-form
      labelWidth="150px"
      :isHandle="true"
      :formRules="formRules2"
      :formCols="formCols2"
      :formHandle="formHandle2"
      :formData="formData2"
      ref="elForm2"
      :inline="false"
      dialogWidth="850px"
    >
    </r-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        // oprType: '',
        phone: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "phone",
          placeholder: "Phone",
          width: 200
        }
        // {
        //     type: 'select',
        //     prop: 'oprType',
        //     placeholder: 'Business Type',
        //     width: 150,
        //     options: [{ label: '管理员开门', value: '0' }, { label: '租Battery', value: '1' }, { label: 'Battery Swap', value: '2' }, { label: '寄存Battery', value: '3' }, { label: 'Deposit退Return Battery池', value: '4' }]
        // },
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => {
            this.zeroFn();
            this.init();
          }
        }
      ],
      isNewAlarm: true, //ControlEdit页面的设备id
      visible: false, //ControlDetails按钮的显示隐藏
      // 表单中 Details按钮的Data
      useDetail: {
        id: "", //设备专属身份ID
        deviceNo: "", //设备id
        fire: 0, //消防警报
        lightning: 0, //雷击警报
        maintainDoor: 0, //维修门Status
        smoke: 0, //烟感警报
        urgencyStop: 0, //急停警报
        water: 0 //浸水警报
      },

      //Add设备警告信息按钮
      tableHandles: [
        // {
        //     label: "Add设备警告信息",
        //     type: "primary",
        //     handle: (e) => {
        //         this.formData2.id = null;
        //         this.isNewAlarm = false;
        //         this.add();
        //     },
        // },
      ],

      tableData: [], //接收后端
      // 表格信息
      tableCols: [
        // {
        //     label: "订单id",
        //     prop: "id",
        // },
        {
          label: "Order Nnumber",
          prop: "orderNo"
        },
        // {
        //     label: "Agent",
        //     prop: "agentId",
        // },
        {
          label: "Phone",
          prop: "phone"
        },
        {
          label: "User",
          prop: "userName"
        },
        {
          label: "User Package Order Number",
          prop: "userMealOrderNo"
        },
        {
          label: "Swap Cabinet Package Order Number",
          prop: "userExchangeOrderNo"
        },
        {
          label: "Battery Number",
          prop: "batteryNo"
        },
        {
          label: "Package Deduction Days",
          prop: "mealDay",
          formatter: e => (e.mealDay ? e.mealDay + "day" : "--")
        },
        {
          label: "Overdue Unit Price",
          prop: "overduePrice",
          formatter: e =>
            e.overduePrice ? "$" + e.overduePrice + "/day" : "--"
        },
        {
          label: "Overdue Amount",
          prop: "overduePay",
          formatter: e => (e.overduePay ? "$" + e.overduePay : "--")
        },
        {
          label: "Overdue Duration",
          prop: "overdueTime",
          formatter: e => (e.overdueTime ? e.overdueTime + "day" : "--")
        },
        {
          label: "PaymentStatus",
          prop: "status",
          itemClass: e =>
            e.status == 0
              ? "danger"
              : e.status == 1
              ? "success"
              : e.status == 2
              ? "warning"
              : e.status == 3
              ? "warning"
              : "",
          formatter: e =>
            e.status == 0
              ? "Wait Payment"
              : e.status == 1
              ? "Already Payment"
              : e.status == 2
              ? "Waive Fee"
              : e.status == 3
              ? "Package Deduction"
              : "--"
        },
        {
          label: "Overdue Time",
          prop: "ctime"
          // formatter: e => (e.ctime ? e.ctime.split("T")[0] + " " + e.ctime.split("T")[1].split(".")[0] : '--')
        },
        {
          label: "Payment Time",
          prop: "etime"
        },

        {
          label: "Operations",
          type: "button",
          width: 120,
          btnList: [
            {
              label: "Cancel Overdue Orders",
              type: "text",
              isShow: e => (e.status == 0 ? false : false),
              handle: async row => {
                this.$confirm("Confirm Cancel Overdue Orders?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    let res = await this.apis.userOverdueCloseOverdueOrder(
                      row.id
                    );
                    this.$message({
                      type: res.code == 200 ? "success" : "error",
                      message: res.msg
                    });
                    this.init();
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ],
      // 分页 每页的条数 总页数  总条数
      tablePage: { limit: 10, page: 1, total: 0 },

      formData: {
        name: "",
        money: "",
        giftMoney: "",
        status: ""
      },
      formCols: [
        { type: "input", label: "Package Name", width: 350, prop: "name" },
        {
          type: "input",
          label: "Package Money($)",
          width: 350,
          prop: "money"
          // remark: "元"
        },
        {
          type: "input",
          label: "Gift Amount($)",
          width: 350,
          prop: "giftMoney"
          // remark: "元"
        },
        { type: "switch", label: "Online/Offline", width: 350, prop: "status" }
      ],
      formRules: {
        name: [
          {
            required: true,
            message: "Please Enter Package Name",
            trigger: "blur"
          }
        ],
        money: [
          {
            required: true,
            message: "Please Enter PackageMoney",
            trigger: "blur"
          }
        ],
        giftMoney: [
          {
            required: true,
            message: "Please Enter PackageMoney",
            trigger: "blur"
          }
        ]
      },
      // 取消与确认按钮
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],

      // 点击Edit按钮出现的表单的 参数
      formData2: {
        id: "", //设备专属身份ID
        deviceNo: "", //设备id
        // fire: 0 ? '异常' : '正常',//消防警报
        // lightning: 0 ? '异常' : '正常',//雷击警报
        // maintainDoor: 0 ? '开启' : '关闭',//维修门Status
        // smoke: 0 ? '异常' : '正常',//烟感警报
        // urgencyStop: 0 ? '异常' : '正常',//急停警报
        // water: 0 ? '异常' : '正常',//浸水警报

        fire: 0, //消防警报
        lightning: 0, //雷击警报
        maintainDoor: 0, //维修门Status
        smoke: 0, //烟感警报
        urgencyStop: 0, //急停警报
        water: 0 //浸水警报
      },
      // 点击Edit按钮出现的表单
      formCols2: [
        {
          type: "input",
          label: "Device ID",
          placeholder: "Please Enter Device ID",
          width: 350,
          prop: "deviceNo",
          isDisabled: e => {
            // ControlEdit页面的设备id能不能修改，分两种情况，1有id，2没有id，2又有两种情况，Add的要Control设备id的长度，Edit的即使没有不能修改
            if (e.deviceNo) {
              // 这里的if判断是区分在有id的情况下，Add 与Edit的页面，当为Add，可以输入16位，否则就是Edit，就不能修改id
              if (!this.isNewAlarm && e.deviceNo) {
                // this.isNewAlarm = true
                return e.deviceNo.length == 16 ? true : false;
              } else {
                return true;
              }
            }
            // 排除没有设备id的情况下，打不开Edit按钮
            else {
              // Add的 ，可以修改id
              if (!this.isNewAlarm) {
                return e.deviceNo.length == 16 ? true : false;
              }
              // Edit的，即使没有id也不能修改
              else {
                e.deviceNo = "-";
                return true;
              }
            }
          }
        },
        {
          type: "select",
          label: "消防警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "fire",
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        },
        {
          type: "select",
          label: "雷击警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "lightning",
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        },
        {
          type: "select",
          label: "维修门Status",
          placeholder: "Please Enter  0代表关闭  Else代表开启",
          width: 350,
          prop: "maintainDoor",
          options: [
            { label: "关闭", value: 0 },
            { label: "开启", value: 1 }
          ]
        },
        {
          type: "select",
          label: "烟感警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "smoke",
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        },
        {
          type: "select",
          label: "急停警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "urgencyStop",
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        },
        {
          type: "select", //决定是输入框还是下拉框
          label: "浸水警报",
          placeholder: "Please Enter  0代表正常  Else代表异常",
          width: 350,
          prop: "water",
          // radios: [{ label: '正常', value: 0 }, { label: '异常', value: 1 }],
          options: [
            { label: "正常", value: 0 },
            { label: "异常", value: 1 }
          ]
        }
      ],

      // Edit按钮提示框
      formRules2: {
        // id: [{ required: true, message: "请输入设备专属身份ID ~16位数字", trigger: "blur" }],
        deviceNo: [
          { required: true, message: "请输入设备id", trigger: "blur" }
        ],
        fire: [
          {
            required: true,
            message: "请输入消防警报Status 0代表正常",
            trigger: "blur"
          }
        ],
        lightning: [
          {
            required: true,
            message: "请输入雷击警报Status 0代表正常",
            trigger: "blur"
          }
        ],
        maintainDoor: [
          {
            required: true,
            message: "请输入维修门Status 0代表正常",
            trigger: "blur"
          }
        ],
        smoke: [
          {
            required: true,
            message: "请输入烟感警报Status 0=正常  0代表正常",
            trigger: "blur"
          }
        ],
        urgencyStop: [
          {
            required: true,
            message: "请输入急停警报Status  0代表正常",
            trigger: "blur"
          }
        ],
        water: [
          {
            required: true,
            message: "请输入浸水警报Status 0代表正常",
            trigger: "blur"
          }
        ]
      },
      // Edit页面的取消与确认按钮
      formHandle2: [
        {
          label: "Cancel",
          // handle: (e) => this.elFormVisible("", "elForm2"),
          handle: e => {
            console.log(e);
            this.elFormVisible("", "elForm2"), (this.isNewAlarm = true);
            this.init();
          }
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit2()
        }
      ]
    };
  },

  computed: {},
  mounted() {
    this.init();
    // this.mealExchange_list();
  },
  methods: {
    zeroFn() {
      this.tablePage.limit = 10;
      this.tablePage.page = 1;
      this.tablePage.total = 0;
    },
    // 拿到后端返回渲染表格的Data
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.userOverdueList(parm);
      if (res) {
        this.tableData = res.rows;
        this.tablePage.total = res.total;
      }
    },

    async elFormSubmit() {
      this.formData.state = this.formData.status == true ? 1 : 2;
      if (this.formData.id) {
        let res = await this.api.packupdate(this.formData);
        if (res) {
          this.formData.id = "";
          this.elFormVisible();
          this.init();
        }
      } else {
        let res = await this.api.packadd(this.formData);
        if (res) {
          this.elFormVisible();
          this.init();
        }
      }
    },
    async changestate(row) {
      let res = await this.apis.device_updata({
        id: row.id,
        useStatus: row.useStatus
      });

      this.$message({
        message: "Operations Success！",
        type: "success"
      });
    },

    // Edit按钮出现后的Edit页面的  绑定确认按钮的方法
    async elFormSubmit2() {
      console.log(111111);
      this.$refs.elForm2.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData2.id) {
            let res = await this.apis.editDeviceWarning(this.formData2);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
            if (res) {
              this.init();
              this.elFormVisible("", "elForm2");
            }
          } else {
            let res = await this.apis.addDeviceWarning(this.formData2);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
            if (res) {
              this.init();
              this.elFormVisible("", "elForm2");
            }
          }
        }
      });
    },

    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });

      this.formData.status = row["state"] == 1 ? true : false;
      this.formData.id = row.id;
      // if (this.formCols[1].label == '登录密码') {
      //     this.formCols.splice(1, 1)
      // }

      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}

#r-result {
  width: 100%;
}
</style>
